<template>
  <div id="home">
    <br>
    <br>
    <div id="search">
      <div style="float: left;padding-left: 100px"><a href="/"><img src="../assets/logo.jpg"></a></div>
      <div style="margin: 0 auto;width: 700px;align-content: center">
        <el-input v-model="serchs" style="width: 300px">

        </el-input>
        <el-button type="danger" @click="searchBook" style="height: 40px">搜索</el-button>
      </div>
    </div>

    <hr style="border: #de0100 solid 1px"/>

    <div class="content">
      <el-row :gutter="30">
        <el-col :span="6" style="">
          <div style="height: 30px;margin:0 auto;font-size: 18px;color: black">电子书分类</div >
          <div style="" v-for="item in bookType">
            <p style="text-align: left;font-size: 16px;padding-bottom: 1px">{{item.bookType.type}}</p>
            <br>
            <!--            <br>-->
            <div style="text-align: left;padding-bottom: 1px">

              <ul v-for="(item1,index) in item.childrens">
                <li style="float: left; margin:3px;line-height: 1px">
                  <a :href="path+item1.typeid" style="color: black;font-size: 10px">{{item1.type}}</a>
                  <span v-if="index<2"> {{'|'}}</span>
                </li>
              </ul>
            </div>
            <hr style="border: #92B8B1 solid 1px"/>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple-light" style="padding-right: 30px">
            <div class="carousel-inner">
              <el-carousel :interval="5000" arrow="always" class="carousel-inner-carousel" height="578px"
                           style="height: 550px">
                <el-carousel-item v-for="item in slideshow">
                  <img :src="item.imgAddress" style="width: 100%;height: 578px">
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </el-col>
      </el-row>


      <!--商品列表-->
      <div class="book">
        <div v-for="item in books">
          <a :href="urls+item.book.bookid" v-if="item.book.isfree!=1">
            <div class="proct pull-right">
              <div v-for="(item1,index) in item.bookimg " v-if="index==0" style="width: 100%">
                <img :src="item1.bookimageaddress" style="width: 100%;height: 234px">
              </div>
              <!--            <img src="../assetsimg/book/Java核心技术_第10版_卷1_原书.png">-->
              <p>{{ item.book.bookname }}</p>
              <p class="prices" v-if="item.book.isfree==0">￥{{ item.book.bookprice }}</p>
              <p class="prices" v-if="item.book.isfree===2">积分兑换</p>
            </div>
          </a>
        </div>
      </div>
      <!--    <div v-for="item in books">
            <img :src="item.bookimg.bookimageaddress">
          </div>-->
<!--      <h2>免费书籍<h2/>-->
      <h2>免费阅读</h2>

      <div class="book">
        <div v-for="item in books">
          <a :href="urls+item.book.bookid" v-if="item.book.isfree==1">
            <div class="proct pull-right">
              <div v-for="(item1,index) in item.bookimg " v-if="index==0" style="width: 100%">
                <img :src="item1.bookimageaddress" style="width: 100%;height: 234px">
              </div>
              <!--            <img src="../assetsimg/book/Java核心技术_第10版_卷1_原书.png">-->
              <p>{{ item.book.bookname }}</p>
              <p class="prices" v-if="item.book.isfree==0">￥{{ item.book.bookprice }}</p>
              <p class="prices" v-if="item.book.isfree===1">免费</p>
              <p class="prices" v-if="item.book.isfree===2">积分兑换</p>
            </div>
          </a>
        </div>
      </div>

      <h2>新品推荐</h2>

      <div class="book">
        <div v-for="item in books">
          <a :href="urls+item.book.bookid">
            <div class="proct pull-right">
              <div v-for="(item1,index) in item.bookimg " v-if="index==0" style="width: 100%">
                <img :src="item1.bookimageaddress" style="width: 100%;height: 234px">
              </div>
              <!--            <img src="../assetsimg/book/Java核心技术_第10版_卷1_原书.png">-->
              <p>{{ item.book.bookname }}</p>
              <p class="prices" v-if="item.book.isfree==0">￥{{ item.book.bookprice }}</p>
              <p class="prices" v-if="item.book.isfree===1">免费</p>
              <p class="prices" v-if="item.book.isfree===2">积分兑换</p>
            </div>
          </a>
        </div>
      </div>
      
    </div>

  </div>

</template>


<script>
import Button from "@/components/Button";

export default {
  name: 'app',
  components: {Button},
  data() {
    return {
      imgData:
          ['img/1.png', 'img/2.png', 'img/3.png'],
      books: null,
      urls: 'details/',
      slideshow: [],
      serchs: '',
      //访问量
      visitNum:'',
      //阅读量
      readNum:'',
      //购买量
      shopNum:'',
      path:'/search/',
      bookType:[
        {
          "childrens": [
            {
              "typeid": 11117,
              "type": "文学小说",
              "parent": 11111
            },
            {
              "typeid": 11118,
              "type": "影视原著",
              "parent": 11111
            },
            {
              "typeid": 11121,
              "type": "中外名著",
              "parent": 11111
            }
          ],
          "bookType": {
            "typeid": 11111,
            "type": "文学",
            "parent": 0
          }
        }
      ]
    }
  },
  created() {
    this.getBookList();
    var _this = this
    axios.get("http://localhost:8082/book-manager/slideshow/select").then(function (resp) {
      _this.slideshow = resp.data
    })

    axios.get('http://localhost:8082/book-manager/bookType/selectAll').then(function (resp){
      console.log(resp.data)
      _this.bookType = resp.data
    })
  },
  methods: {
    getBookList() {
      var vm = this;
      axios({
        method: 'get',
        url: 'http://localhost:8082/book-manager/book/list'
      }).then(function (resp) {
        vm.books = resp.data;
      });
    },
    searchBook() {
      this.$router.push("/search/"+this.serchs)
    }
  }
}
</script>

<style scoped>
.content {
  /*margin-top: 25px;*/
  width: 95%;
  margin: 0 auto;
}

li {
  list-style-type: none;
}

#search {
  height: 50px;
}

#search input {
  /*border: #de0100 solid 1px;*/
  width: 300px;
  height: 36px;
}

#search span {
  margin-left: 0px;
}

button {
  width: 132px;
  height: 36px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 5px;
  background-color: #de0100;
  position: absolute;
  z-index: 1;
  border-radius: 0;
  color: white;
}

.proct {
  /*border: 1px solid #555555;*/
  width: 240px;
  height: 310px;
  display: inline-block;
  margin-left: 49px;
  margin-top: 20px;
  text-align: left;
}

.carousel-inner {
  margin: 0 auto;
  width: 100%;
  height: 450px;
}

.book div {
  display: inline-block;
  text-align: left;
}

p {
  margin-left: 2px;
  text-align: center;
  color: #333;
  line-height: 20px;
  font-size: 20px;
  height: 30px;
}

.prices {
  color: #de0100;
  /*margin-bottom: 30px;*/
}

.carousel-inner-carousel {
  height: 100%;
  width: 100%
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.bg-purple{
  background-color: #92B8B1;
}

</style>
